<template>
  <div class="my-applications">
    <el-card>
      <template #header>
        <div class="card-header">
      <h2>我的奖学金申请</h2>
        </div>
      </template>

      <!-- 状态筛选标签页 -->
      <el-tabs v-model="activeStatus" @tab-click="fetchApplications" style="margin-bottom: 20px;">
        <el-tab-pane label="全部" name="all" />
        <el-tab-pane label="申请中" name="申请中" />
        <el-tab-pane label="已通过" name="已通过" />
        <el-tab-pane label="已拒绝" name="已拒绝" />
      </el-tabs>

      <!-- 空状态 -->
      <div v-if="applications.length === 0" class="empty">
        <el-empty description="你还没有提交过奖学金申请哦~" />
      </div>

      <!-- 申请记录表格 -->
      <el-table v-else :data="applications" style="width: 100%" v-loading="loading">
        <el-table-column prop="scholarshipName" label="奖学金名称" min-width="150" />
        <el-table-column prop="applyDate" label="申请时间" min-width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="审核意见" min-width="150">
          <template #default="{ row }">
            <span>{{ row.remark || '暂无' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="showDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailVisible" title="申请详情" width="500px">
      <div v-if="currentDetail" class="detail-content">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="奖学金名称">
            {{ currentDetail.scholarshipName }}
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ currentDetail.applyDate }}
          </el-descriptions-item>
          <el-descriptions-item label="申请状态">
            <el-tag :type="getStatusType(currentDetail.status)">
              {{ getStatusText(currentDetail.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请理由">
            {{ currentDetail.reason || '暂无' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ currentDetail.contact || '暂无' }}
          </el-descriptions-item>
          <el-descriptions-item label="审核意见">
            {{ currentDetail.remark || '暂无' }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import axios from 'axios'
import { ElMessage } from 'element-plus'
  
  const applications = ref([])
const activeStatus = ref('all')
const detailVisible = ref(false)
const currentDetail = ref(null)
const loading = ref(false)
const scholarships = ref([])

const studentId = localStorage.getItem('studentId')

// 状态文本映射
const getStatusText = (status) => {
  switch (status) {
    case '申请中': return '审核中'
    case '已通过': return '已通过'
    case '已拒绝': return '已拒绝'
    default: return status
  }
}

// 状态类型映射
const getStatusType = (status) => {
  switch (status) {
    case '申请中': return 'info'
    case '已通过': return 'success'
    case '已拒绝': return 'danger'
    default: return 'info'
  }
}

// 获取奖学金列表
const fetchScholarships = async () => {
  try {
    const res = await axios.get('/scholarships')
    scholarships.value = res.data
  } catch (e) {
    console.error('获取奖学金列表失败', e)
  }
}

// 获取申请记录
const fetchApplications = async () => {
  if (!studentId) {
    ElMessage.error('请先登录')
    return
  }

  loading.value = true
  try {
    // 先获取所有申请记录
    const res = await axios.get(`/scholarship-applications/search/student?studentId=${studentId}`)
    console.log('申请记录原始数据:', res.data)
    
    let filteredData = res.data || []
    
    // 根据状态筛选
    if (activeStatus.value !== 'all') {
      filteredData = filteredData.filter(app => app.status === activeStatus.value)
    }
    
    // 处理数据，将scholarshipId转换为scholarshipName
    applications.value = filteredData.map(app => {
      const scholarship = scholarships.value.find(s => s.scholarshipId === app.scholarshipId)
      return {
        ...app,
        scholarshipName: scholarship ? scholarship.name : '未知奖学金',
        applyDate: new Date(app.applyDate).toLocaleDateString('zh-CN')
      }
    })
    
    console.log('处理后的申请记录:', applications.value)
  } catch (e) {
    console.error('获取申请记录失败', e)
    ElMessage.error('获取申请记录失败')
  } finally {
    loading.value = false
  }
}

// 显示详情
const showDetail = (row) => {
  currentDetail.value = row
  detailVisible.value = true
}

// 页面加载时获取数据
onMounted(async () => {
  await fetchScholarships() // 先获取奖学金列表
  await fetchApplications() // 再获取申请记录
  })
  </script>

<style scoped>
.my-applications {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.empty {
  margin: 40px 0;
  text-align: center;
}

.detail-content {
  padding: 10px 0;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  color: #606266;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-tabs__nav-wrap) {
  margin-bottom: 20px;
}
</style>